import SwiftUI

struct AnimationCurves: View {
    @State var offsetY: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 30) {
            Text("Animation Curves")
                .font(.largeTitle)
            
            Text("Curves")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("An animation curve is a way to express the speed throughout the duration of the animaiton.")
                .padding()
                .foregroundColor(.black)
                .font(.title2)
                .frame(maxWidth: .infinity)
                .background(Color.cyan)
            
            makeCurveView()
            
            Spacer()
            
            Button(action: {
                offsetY = offsetY == 600 ? 0 : 600
            }, label: {
                Text("Move").font(.title).padding(.bottom, 50)
            })
        }
        
    }
    
    func makeCurveView() -> some View {
        VStack {
            HStack {
                Spacer()
                Text("EaseInOut")
                Spacer()
                Text("EaseIn")
                Spacer()
                Text("EaseOut")
                Spacer()
                Text("Linear")
                Spacer()
            }
            .font(.headline)
            .foregroundColor(.teal)
            
            HStack {
                Spacer()
                
                Circle()
                    .foregroundColor(.purple)
                    .frame(width: 50, height: 50)
                    .offset(x: 0, y: offsetY)
                    .animation(.easeInOut, value: offsetY)
                
                Spacer()
                
                Circle()
                    .foregroundColor(.purple)
                    .frame(width: 50, height: 50)
                    .offset(x: 0, y: offsetY)
                    .animation(.easeIn, value: offsetY)

                Spacer()
                
                Circle()
                    .foregroundColor(.purple)
                    .frame(width: 50, height: 50)
                    .offset(x: 0, y: offsetY)
                    .animation(.easeOut, value: offsetY)

                Spacer()
                
                Circle()
                    .foregroundColor(.purple)
                    .frame(width: 50, height: 50)
                    .offset(x: 0, y: offsetY)
                    .animation(.linear, value: offsetY)
                
                Spacer()
            }
        }
    }
}




